<template>
	<view class="tui-segmented__control" :class="{ 'tui-segmented__disabled': disabled }">
		<view
			class="tui-segmented__item"
			v-for="(item, index) in values"
			:key="index"
			:style="{
				borderTopLeftRadius: index === 0 ? radius : '0',
				borderBottomLeftRadius: index === 0 ? radius : '0',
				borderTopRightRadius: index === values.length - 1 ? radius : '0',
				borderBottomRightRadius: index === values.length - 1 ? radius : '0',
				borderColor: activeColor,
				backgroundColor: currentIndex === index ? activeColor : 'transparent',
				height: height
			}"
			:class="{ 'tui-segmented__first': index === 0 }"
			@click="handleClick(index)"
		>
			<text :style="{ fontSize: size, color: currentIndex === index ? '#fff' : activeColor }">{{ item }}</text>
		</view>
	</view>
</template>

<script setup>
import { ref, watch } from 'vue'

const emit = defineEmits(['click'])

const props = defineProps({
	values: {
		type: Array,
		default() {
			return []
		}
	},
	current: {
		type: Number,
		default: 0
	},
	activeColor: {
		type: String,
		default: '#5677fc'
	},
	height: {
		type: String,
		default: '56rpx'
	},
	//字体大小
	size: {
		type: String,
		default: '28rpx'
	},
	radius: {
		type: String,
		default: '4px'
	},
	disabled: {
		type: Boolean,
		default: false
	}
})

const currentIndex = ref(0)
currentIndex.value = props.current

watch(
	() => props.current,
	nVal => {
		if (nVal !== currentIndex.value) {
			currentIndex.value = nVal
		}
	}
)

const handleClick = index => {
	if (currentIndex.value !== index && !props.disabled) {
		currentIndex.value = index
		emit('click', {
			index
		})
	}
}
</script>

<style lang="scss" scoped>
.tui-segmented__control {
	flex: 1;
	/* #ifndef APP-NVUE */
	width: 100%;
	display: flex;
	box-sizing: border-box;
	/* #endif */
	flex-direction: row;
	overflow: hidden;
	/* #ifdef H5 */
	cursor: pointer;
	/* #endif */
}

.tui-segmented__item {
	/* #ifndef APP-NVUE */
	display: inline-flex;
	box-sizing: border-box;
	transition: all 0.1s linear;
	/* #endif */

	flex: 1;
	justify-content: center;
	align-items: center;
	border-style: solid;
	border-left-width: 0;

	/* #ifdef APP-NVUE */
	border-top-width: 0.5px;
	border-bottom-width: 0.5px;
	border-right-width: 0.5px;
	/* #endif */

	/* #ifndef APP-NVUE */
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-right-width: 1px;
	/* #endif */

	position: relative;
}

.tui-segmented__disabled {
	opacity: 0.5;
	/* #ifdef H5 */
	cursor: not-allowed !important;
	/* #endif */
}

.tui-segmented__first {
	border-left-style: solid;
	/* #ifndef APP-NVUE */
	border-left-width: 1px;
	/* #endif */

	/* #ifdef APP-NVUE */
	border-left-width: 0.5px;
	/* #endif */
}
</style>
